<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrappe">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="单据编号">
              <a-input placeholder="请输入单据编号" v-model="queryParam.billNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="申请时间">
              <a-range-picker
                :placeholder="['开始时间', '结束时间']"
                format="YYYY-MM-DD"
                v-model="createTime"
                @change="handleChange"
              />
              
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <div>
      <!-- <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 收款合同
      </div> -->

      <a-table
        ref="table"
        size="middle"
        :scroll="{ x: '100%' }"
        bordered
        rowKey="id"
        :pagination="ipagination"
        :columns="columns"
        :dataSource="dataSource"
        :loading="loading"
        @change="handleTableChange"
        class="j-table-force-nowrap">
      </a-table>
    </div>
    <ErpFinanceTravelReimbursementBillModal ref="modalForm" />
  </a-card>
</template>

<script>
import Ellipsis from '@/components/Ellipsis'
import { getAction } from '@/api/manage';
import { filterObj } from '@/utils/util'
import moment from 'moment';
import ErpFinanceTravelReimbursementBillModal from '@/views/erp/finance/travel/modules/ErpFinanceTravelReimbursementBillModal'
export default {
  name: 'TravelReportForm',
  components: {
    Ellipsis,
    ErpFinanceTravelReimbursementBillModal
  },
  data() {
    return {
      /* 排序参数 */
      isorter: {
        column: 'createTime',
        order: 'desc'
      },
      url: {
        list: '/api/erp/finance/travel/erpFinanceTravelReimbursementDetail/listByEmployee',
        queryById: "/api/erp/finance/travel/erpFinanceTravelReimbursementBill/queryById",
      },
      queryParam: {},
      createTime: [],
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '20', '30', '50', '100', '200'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条'
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0
      },
      loading: false,
      dataSource: [],
      employeeId: '',
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          }
        },
        {
          title: '单据编号',
          align: 'center',
          dataIndex: 'billNo',
          scopedSlots: { customRender: 'billNo' },
          ellipsis: true,
          customRender: (text, r) => {
            if (!text) {
              return ''
            } else {
              return <a v-on:click={(e) => this.onBillNoDetail(r)}>{text}</a>;
            }
          }
        },
        {
          title: '申请时间',
          align: 'center',
          dataIndex: 'createTime',
          scopedSlots: { customRender: 'createTime' },
          ellipsis: true
        },
        {
          title: '申请公司',
          align: 'center',
          dataIndex: 'companyId_dictText',
          ellipsis: true
        },
        {
          title: '申请团队',
          align: 'center',
          dataIndex: 'teamId_dictText',
          ellipsis: true
        },
        {
          title: '报销明细(元)',
          align: 'center',
          dataIndex: 'accountMoney',
          ellipsis: true,
          scopedSlots: { customRender: 'accountMoney' },
          customRender: (text, r) => {
            if (!text) {
              return '0'
            } else {
              return <p>{text}</p>;
            }
          }
        },
        {
          title: '自驾公里数补助(元)',
          align: 'center',
          dataIndex: 'subsidy',
          ellipsis: true,
          scopedSlots: { customRender: 'subsidy' },
          customRender: (text, r) => {
            if (!text) {
              return '0'
            } else {
              return <p>{text}</p>;
            }
          }
        },
        {
          title: '收款人',
          align: 'center',
          dataIndex: 'subsidyProposer_dictText',
          scopedSlots: { customRender: 'subsidyProposer_dictText' },
          ellipsis: true
        }
      ]
    }
  },
  methods: {
    getQueryParams() {
      // 获取查询条件
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
        sqp['superQueryMatchType'] = this.superQueryMatchType
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter, this.filters)
      // param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return filterObj(param)
    },
    // getQueryField() {
    //   // TODO 字段权限控制
    //   var str = 'id'
    //   this.columns.forEach(function (value) {
    //     // 多表头字段
    //     if (value.dataIndex == null && value.dataIndex === undefined) {
    //       value.children.forEach(function (item) {
    //         str += ',' + item.dataIndex.replace('_dictText', '')
    //       })
    //     } else {
    //       str += ',' + value.dataIndex
    //     }
    //   })
    //   return str
    // },
    async loadData(arg) {
      if (!this.url.list) {
        this.$message.error('请设置url.list属性!')
        return
      }
      // 加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      let params = this.getQueryParams() // 查询条件
      params.employeeId = this.employeeId
      // let params = {
      //   // beginDate: '2023-09-01',
      //   // endDate: '2023-09-01',
      //   pageNo: this.ipagination.current,
      //   pageSize: this.ipagination.pageSize
      // };
      // 查询条件
      var param = Object.assign({}, params, this.isorter, {});
      this.loading = true;
      let res = await getAction(this.url.list, param)
      this.loading = false;
      if (res.success) {
        this.dataSource = res.result.records;
        if (res.result.total) {
          this.ipagination.total = res.result.total
        } else {
          this.ipagination.total = 0
        }
        // 判断是否当前页没有数据且不为第一页
        if (this.dataSource.length == 0 && this.ipagination.current != 1) {
          this.ipagination.current = this.ipagination.current - 1
          this.loadData(this.ipagination.current - 1);
        }
      } else {
        this.dataSource = [];
        this.ipagination.total = 0
      }
    },

    searchQuery() {
      // this.onClearSelected();
      this.loadData(1)
    },
    searchReset() {
      // this.onClearSelected();
      this.createTime = []
      this.queryParam = {}
      this.loadData(1)
    },

    handleChange(value) {
      // console.log('进入change方法：', value)
      // this.createTime = value;
      console.log('--', value)
      this.$set(this.queryParam, 'beginDate', moment(value[0]).format('YYYY-MM-DD'))
      this.$set(this.queryParam, 'endDate', moment(value[1]).format('YYYY-MM-DD'))
      // console.log('进入change方法：', this.queryParam)
    },

    onBillNoDetail (record) {
      let params = { id: record.id };
      getAction(this.url.queryById, params).then((res) => {
        if (res.success) {
          this.$refs.modalForm.edit(res.result);
          this.$refs.modalForm.title = "详情";
          this.$refs.modalForm.disableSubmit = true;
        }
      });
    },

    handleTableChange(pagination, filters, sorter) {
      // 分页、排序、筛选变化时触发
      this.filters = {}
      if (Object.keys(filters).length > 0) {
        for (let key in filters) {
          let value = filters[key].join(',')
          if (value) {
            if (key.indexOf('_dictText') != -1) {
              key = key.substring(0, key.indexOf('_dictText'))
            }
            this.filters[key] = value
          }
        }
      }
      if (Object.keys(sorter).length > 0) {
        this.isorter.column = sorter.field
        this.isorter.order = sorter.order == 'ascend' ? 'asc' : 'desc'
      }
      this.ipagination = pagination
      this.loadData()
    }
  }
}
</script>
<style scoped></style>
